import React, { useState, useEffect } from 'react'
import { Button, Checkbox, Form, Input,message } from 'antd';
import { debounce } from 'lodash';
import {postList} from '../../api/index'
import {useNavigate} from 'react-router-dom'
import jiejia from '../../until/jiejia'

import './register.scss'
import { logDOM } from '@testing-library/react';
export default function Register() {

  let navigate=useNavigate()

  const onFinish = debounce ((values) => {

    //账号正则,手机号和邮箱
    let arr = /^1[3-9][0-9]{9}$/;
    let str =/^[1-9a-zA-Z][0-9a-zA-Z]{5,17}@[1-9a-zA-Z][0-9a-zA-Z]{1,}\.(com|cn|net)$/;
    //密码验证,密码首字母大写，且长度在1到8位之间，可以包含字母和数字
    let passStr = /^(?=.*[A-Z])[A-Za-z\d]{1,8}$/;
    let pass =jiejia.set(values.Password)
    if(arr.test(values.Username)||str.test(values.Username)){
          if(passStr.test(values.Password)){
              if(values.Password===values.querPassword){
                let obj ={
                  Username:values.Username,
                  Password:pass
                }
                postList('/register',obj).then((res)=>{
                  console.log(res.data);
                  if(res.data.type==='success'){
                    message.open({
                      type: 'success',
                      content:res.data.message,
                    });
                    
                    navigate('/user')
                  }else{
                    message.open({
                      type: 'warning',
                      content:res.data.message,
                    });
                  }
                })
              }else{
                message.open({
                  type: 'warning',
                  content: '两次密码输入不一致',
                });
              }
          }else{
            message.open({
              type: 'warning',
              content: '密码格式不对',
            });
          }
    }else{
      message.open({
        type: 'warning',
        content: '账号格式不对',
      });
    }
  },1500);
  
 

  return (
    <div id="registerBox">
      <div className="title">
        <h1>FM后台管理系统中台</h1>
      </div>
      <div className="useCont">
        <div className="useHerder">
          <h2>心心相印中台系统</h2>
        </div>
        <div className="useCenter">
          <Form
            name="basic"
            wrapperCol={{ span: 16, }}
            style={{ Width: 600, }}
            labelAlign="left"
            initialValues={{ remember: true, }}
            onFinish={onFinish}
          >
            <Form.Item
              label="账号"
              name="Username"
              style={{paddingLeft:'35px'}}
              rules={[
                {
                  required: true,
                  message: '账号不能为空!',
                },
              ]}
            >
              <Input placeholder='请输入手机号/邮箱号' style={{ width: "270px" }} />
            </Form.Item>

            <Form.Item
              label="密码"
              name="Password"
              style={{paddingLeft:'35px'}}
              rules={[
                {
                  required: true,
                  message: '密码不能为空!',
                },
              ]}
            >
              <Input style={{ width: "270px" }} placeholder='请输入密码' />
            </Form.Item>

            <Form.Item
              label="确认密码"
              name="querPassword"
              style={{paddingLeft:'10px'}}
              rules={[
                {
                  required: true,
                  message: '确认密码不能为空!',
                },
              ]}
            >
              <Input style={{ width: "270px"}} placeholder='请输入密码' />
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 4,
                span: 16,
              }}
            >
              <Button type="primary"
                style={{width:"300px", marginTop: "30px" }} htmlType="submit">
                注册
              </Button>
            </Form.Item>

            
          </Form>
        </div>
        
      </div>

    </div>
  )
}
